document.addEventListener('DOMContentLoaded', function () {
  var navLinks = document.querySelectorAll('nav a'); // 获取所有导航链接
  var sections = document.querySelectorAll('.main > h4'); // 获取所有目标节区
  var navBar = document.querySelector('nav'); // 导航条

  function updateNavOnScroll() {
    var scrollTop = window.scrollY; // 获取当前滚动位置
    var windowHeight = window.innerHeight; // 获取窗口高度

    sections.forEach(function (section, index) {
      var sectionTop = section.offsetTop; // 获取节区顶部位置
      var sectionBottom = sectionTop + section.offsetHeight; // 获取节区底部位置
      var currentNavLink = navLinks[index]; // 获取当前目标节区对应的导航链接

      if (scrollTop >= sectionTop - windowHeight / 2 && scrollTop < sectionBottom - windowHeight / 2) {
        currentNavLink.classList.add('current'); // 添加 'current' 类
      } else {
        currentNavLink.classList.remove('current'); // 移除 'current' 类
      }
    });
  }

  function scrollToSection(e) {
    e.preventDefault();
  
    var targetHref = this.getAttribute('href'); // 获取目标节区的链接
    var targetSection = document.querySelector(targetHref); // 获取目标节区元素
    var offset = 200; // 滚动位置的偏移量
  
    var targetPosition = targetSection.getBoundingClientRect().top + window.pageYOffset; // 计算目标节区相对于视口顶部的位置
    var startPosition = window.pageYOffset; // 当前滚动位置
  
    var distance = targetPosition - startPosition - offset; // 计算滚动距离
    var duration = 500; // 滚动的持续时间
  
    var startTimestamp = null;
  
    function step(timestamp) {
      if (!startTimestamp) startTimestamp = timestamp;
  
      var progress = timestamp - startTimestamp;
      var percentage = Math.min(progress / duration, 1); // 计算滚动进度的百分比
  
      window.scrollTo(0, startPosition + distance * percentage); // 根据滚动进度更新滚动位置
  
      if (progress < duration) {
        window.requestAnimationFrame(step); // 继续执行滚动动画
      }
    }
  
    window.requestAnimationFrame(step); // 启动滚动动画
  }
  

  navLinks.forEach(function (link) {
    link.addEventListener('click', scrollToSection); // 监听导航链接的点击事件
  });
  
  console.log(window);
  window.addEventListener('scroll', function () {
    updateNavOnScroll(); // 更新导航链接状态

    var firstSection = document.querySelector(".banner"); // 第一个节区

    console.log("🚀  window.scrollY:", window.scrollY)
    console.log("🚀  firstSection.offsetTop:", firstSection.offsetTop)
    if (window.scrollY >= firstSection.offsetTop+80) {
      navBar.style.opacity = '1'; // 显示导航条
    } else {
      navBar.style.opacity = '0'; // 隐藏导航条
    }
  });
});
